<template>
  <div class="content">
    <div v-show = "no_notice === true" class="no_notice">
      <img src="../../assets/没有消息提示.png" class="image" alt="">
      <p style="margin-top:-5em; margin-left: 9em">似乎没有消息~</p>
    </div>
    <div v-for="item in notification" :key="item.id" v-show = "yes_notice === true">
      <el-dropdown>
        <el-button style="border: none; background: none">
          <i class="el-icon-more"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>删除</el-dropdown-item>
          <el-dropdown-item>设为未读</el-dropdown-item>
          <el-dropdown-item>设为已读</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="card">
        <p style="font-size:10px;">{{item.content}}</p>
        <p style="font-size:10px;">{{item.time}}</p>
      </div>
      <br>
    </div>
  </div>
</template>

<script>
export default {
  name: "personalnotice",
  data(){
    return{
      notification: [{id:1, content: 'hello', time:"2021.1.1"},{id:2, content: 'youxi~', time:"2021.1.1"},{id:3, content: "LALALA", time:"2021.1.1"}],
      no_notice: false,
      yes_notice: true,
    }
  },
  mounted(){
    //this.GetNotification();
    localStorage.setItem("notice_num", '1');
  },
  methods:{
    GetNotification(){
      const self = this;
      self.axios({
        methos: 'post',
        url: '/personalnotice/',
        data:{
          user_id: this.$store.state.username,
        },
        headers: {'X-CSRFToken':
              this.getCookie('csrftoken')
        },
      }).then(res => {
        const obj = res.data;
        //没有系统消息
        if(obj.notice.length === 0){
          this.no_notice = true;
          this.yes_notice = false;
          localStorage.setItem("notice_num", "0");
        }
        else{
          this.SetNotificationList(obj.notice);
          this.no_notice = false;
          this.yes_notice = true;
        }
      }).catch(err => {
        console.log(err);
        this.$message("获取消息失败")
      })
    }
  },
  SetNotificationList(l){
    let i = 0;
    localStorage.setItem("notice_num", l.length.toString());
    for(i ; i < l.length; i++){
      this.notification.push(l.get(i));
    }
  }
}
</script>

<style scoped>
.content{
  width: 38em;
}
.no_notice{
  font-size: 15px;
  margin-top:4em;
  margin-left:10em;
}
.image{
  height: 8em;
  width: 8em;
}
.card{
  position: relative;
  width: 38em;
  height: 5em;
  background: #fff;
  border-radius: 1em;
  background: rgba(255,255,255,0.1);
  box-shadow: 0 1em 2em rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 2px solid rgba(255,255,255,0.5);
  border-left: 2px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(0.5em);
}
</style>